<!doctype html>
<html>
<head>
<title>html entity's character value</title>
<meta charset="utf-8"/>
<style>

    #entityholder a {
        margin: 5px;
        padding: 2px;
        display: inline-block;
    }
</style>
</head>

<body>
<select id="entityMethod">
    <option value='html'>use html to get entity value</option>
    <option value="text">use text to get entity value</option>
</select>
<div id="hcon">
    &nbsp;
</div>
<div id="entityholder">

</div>
<script src="../../base/javascript/kissy.js"></script>
<script>
    (function() {
        var S = KISSY,Node = S.Node;


        var entities = {
            "Base HTML entities":'nbsp,gt,lt,quot,amp',
            // Latin-1 Entities
            "Latin-1 Entities":    'iexcl,cent,pound,curren,yen,brvbar,sect,uml,copy,ordf,laquo,' +
                    'not,shy,reg,macr,deg,plusmn,sup2,sup3,acute,micro,para,middot,' +
                    'cedil,sup1,ordm,raquo,frac14,frac12,frac34,iquest,times,divide',

            // Symbols
            "Symbols":
                    'fnof,bull,hellip,prime,Prime,oline,frasl,weierp,image,real,trade,' +
                            'alefsym,larr,uarr,rarr,darr,harr,crarr,lArr,uArr,rArr,dArr,hArr,' +
                            'forall,part,exist,empty,nabla,isin,notin,ni,prod,sum,minus,lowast,' +
                            'radic,prop,infin,ang,and,or,cap,cup,int,there4,sim,cong,asymp,ne,' +
                            'equiv,le,ge,sub,sup,nsub,sube,supe,oplus,otimes,perp,sdot,lceil,' +
                            'rceil,lfloor,rfloor,lang,rang,loz,spades,clubs,hearts,diams',
            // Other Special Characters
            "Other Special Characters":
                    'circ,tilde,ensp,emsp,thinsp,zwnj,zwj,lrm,rlm,ndash,mdash,lsquo,' +
                            'rsquo,sbquo,ldquo,rdquo,bdquo,dagger,Dagger,permil,lsaquo,rsaquo,' +
                            'euro',
            "Latin Letters Entities":'Agrave,Aacute,Acirc,Atilde,Auml,Aring,AElig,Ccedil,Egrave,Eacute,' +
                    'Ecirc,Euml,Igrave,Iacute,Icirc,Iuml,ETH,Ntilde,Ograve,Oacute,Ocirc,' +
                    'Otilde,Ouml,Oslash,Ugrave,Uacute,Ucirc,Uuml,Yacute,THORN,szlig,' +
                    'agrave,aacute,acirc,atilde,auml,aring,aelig,ccedil,egrave,eacute,' +
                    'ecirc,euml,igrave,iacute,icirc,iuml,eth,ntilde,ograve,oacute,ocirc,' +
                    'otilde,ouml,oslash,ugrave,uacute,ucirc,uuml,yacute,thorn,yuml,' +
                    'OElig,oelig,Scaron,scaron,Yuml',

            "Greek Letters Entities":'Alpha,Beta,Gamma,Delta,Epsilon,Zeta,Eta,Theta,Iota,Kappa,Lambda,Mu,' +
                    'Nu,Xi,Omicron,Pi,Rho,Sigma,Tau,Upsilon,Phi,Chi,Psi,Omega,alpha,' +
                    'beta,gamma,delta,epsilon,zeta,eta,theta,iota,kappa,lambda,mu,nu,xi,' +
                    'omicron,pi,rho,sigmaf,sigma,tau,upsilon,phi,chi,psi,omega,thetasym,' +
                    'upsih,piv'
        };
        var holder = S.one("#entityholder"),
                hcon = S.one("#hcon"),
                entityMethod = S.one("#entityMethod");
        for (var e in entities) {
            var v = entities[e].split(",");
            new Node("<h1>" + e + "</h1>").appendTo(holder);
            var d = new Node("<div>").appendTo(holder);
            var strs = "";

            for (var i = 0; i < v.length; i++) {
                var c = v[i];
                new Node("<a href='javascript:void(0)'>" + c + "</a>").appendTo(d);
            }

        }

        holder.all("a").on("click", function(ev) {
            var t = new Node(ev.target);
            hcon.html("&" + t.text() + ";");
            if (entityMethod.val() == 'text')
                alert(hcon.text());
            else alert(hcon.html());
        });
    })();
</script>
</body>
</html>